body {
    background: black;
}

/* 
div div {
    border: 1px solid white;
}

这种情况下控制板写一个CSS，黑点写一个CSS样式，然后把这些样式用class作用于标签上；
而不是用子代选择器写 */

.panel {
    background-color: #e7e7e7;
    border-radius: 10%;
    width: 104px;
    height: 104px;
    box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
    margin: 16px;
    padding: 4px;
}

.point {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    border: 1px solid black;
    background-color: black;
}

.row {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
}

/* line-one */

.start {
    display: flex;
    justify-content: flex-start;
}

.panel.cneter {
    display: flex;
    justify-content: center;
}

.panel.end {
    display: flex;
    justify-content: flex-end;
}

.panel.column-center {
    align-items: center;
    display: flex;
}

.center-center {
    justify-content: center;
    /* font-variant: unset; */
    display: flex;
    align-items: center;
}

.panel.cneter-end {
    justify-content: center;
    align-items: flex-end;
    display: flex;
}

.panel.end-end {
    justify-content: flex-end;
    display: flex;
    align-items: flex-end;
}

/* 第二行 */

.panel.row-btw {
    justify-content: space-between;
    display: flex;
}

.panel.clo-btw {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.clo-btn-row-cen {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.panel.column-center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.flex {
    display: flex;
}

.point-row {
    flex-direction: row;
}

.column {
    flex-direction: column;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-around {
    justify-content: space-around;
}

.align-items-center {
    align-items: center;
}

.align-self-center {
    align-self: center;
}

.align-self-end {
    align-self: flex-end;
}